<div class="zc-body">

    <div class="cards-c">
        <nz-card class="cards-body" style="margin-right: 5px;">
            <div class="cards-title">
                <h2>预约检测</h2>
                <p>云检测，最优方案，全程服务</p>
            </div>
            <div class="cards-input-c">
                <nz-select style="width: 180px;margin-right: 15px;" [(ngModel)]="page.status"
                    (ngModelChange)='onChangeSearch()' nzShowSearch nzAllowClear nzPlaceHolder="请选择您的检测类型">
                    <nz-option *ngFor="let status of statusDatas" nzValue="{{status?.v}}" nzLabel="{{status?.name}}">
                    </nz-option>
                </nz-select>
                <div style="width: 180px;margin-right: 15px;">
                    <input nz-input placeholder="请输入您的手机号" nzSize="default" />
                </div>
                <button nz-button nzType="primary" [routerLink]='["/member/center/home/jcSubmit"]' [queryParams]="{type: 'Y' }">立即预约</button>
            </div>
        </nz-card>
        <nz-card class="cards-body" style="margin-left: 5px;">
            <div class="cards-title">
                <h2>免费评估</h2>
                <p>不知道如何检测？上传您的产品文档，“云检测”免费帮你定位检测类型</p>
            </div>
            <div class="cards-input-c">
                <button style="margin-right: 10px;" nz-button>
                    <span><i nz-icon nzType="upload"></i> 上传检测文件</span>
                </button>
                <!-- <clain-image-upload [(ngModel)]='idcardFrontImage'></clain-image-upload> -->
                <div style="width: 180px;margin-right: 15px;">
                    <input nz-input placeholder="请输入您的手机号" nzSize="default" />
                </div>
                <button nz-button nzType="primary" [routerLink]='["/member/center/home/jcSubmit"]' [queryParams]="{type: 'N' }">立即评估</button>
            </div>
        </nz-card>
    </div>
    <div class="need-card">
        <div class="need-card-title">
            <div class="card-title-icon">
                <img src="../../../../assets/img/home-page/ineedicon.png" alt="">
            </div>
            <h1>我要检测</h1>
            <div class="card-title-right">
                <a >委托检测</a>
                <a >型式检测</a>
                <a >远程检测</a>
            </div>
        </div>
        <div class='need-card-body'>
            <div nz-row>
                <div nz-col nzSpan="6" class="porjact" *ngFor="let item of page.porjacts">
                    <div style="margin-right: 5px;">
                        <img src="../../../../assets/img/home-page/cam.icon.png" alt="">
                    </div>
                    <span>{{item}}</span>
                </div>
            </div>
        </div>
    </div>

    <div class="hots-card">
        <div class="need-card-title">
            <div class="card-title-icon">
                <img src="../../../../assets/img/home-page/ineedicon.png" alt="">
            </div>
            <h1>热门监测</h1>
            <div class="card-title-right">
                <a >猜你喜欢</a>
                <a >网络摄像头</a>
                <a >防盗门</a>
                <a >防爆盾牌</a>
                <a >入侵检测</a>
            </div>
        </div>
        <div class='hot-card-body'>
            <div class="list-item" *ngFor="let item of list">
                <div class="small-item">
                    <div class="l">
                        <h1>{{item.title}}</h1>
                        <div class="l-b">
                            <!-- <label style="padding-left: 0;" for="">机构星级：</label>
                            <nz-rate [ngModel]="5"></nz-rate> -->
                            <label for="">送检机构：</label>
                            <p>公安三所</p>
                            <label for="">销量：</label>
                            <p>{{item.v}}件</p>
                        </div>
                    </div>
                    <div class="z">
                        <!-- <h1>¥300.00</h1>
                        <p>原价370</p> -->
                    </div>
                    <div class="list-btn">
                        <button nz-button nzType="primary">查看详情</button>
                    </div>
                </div>
            </div>
            <!-- <div nz-row>
                <div nz-col nzSpan="8" class="porjact" *ngFor="let item of page.hots" [routerLink]='["/member/center/home/projectDetail"]'
                [queryParams]="{id: del?.id}">
                    <div class="img-c">
                        <img src="{{item.img}}" alt="">
                    </div>
                    <h1>{{item.titel}}</h1>
                    <div style="display: flex;">
                        <p *ngFor="let type of item.types">{{type}} |</p>
                    </div>
                    <h2 style="color: red;">{{item.jg}} <font  style="color:#CCCCCC;font-size:12px;text-decoration:line-through;">{{item.beforjg}}</font></h2>
                </div>
            </div> -->
            <p style="text-align: center;color: #B0B0B0;">查看更多>></p>
        </div>
    </div>
</div>